<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <style type="text/css">
        /**
        div+p选择器选取的是紧跟在div后面的p元素，且p与div是兄弟关系，
        所以p在div之前，或p在div后面但是它们之间有其他元素，都不会被这个选择器选取到
         */
        div+p{
            color:red;
        }
        .div3>div{
            color: chocolate;
        }
        .div4>div{
            color: aqua;
        }
    </style>
</head>
<body>
<div>
<p>我跟div1也是兄弟元素，也紧挨着div1，但是我是在div1前面</p>
<div id="div1">我是div1</div>
<p>我是紧挨着div1的p，我跟div1是兄弟关系</p>
<p>我跟div1也是兄弟，但我并不紧挨着div1</p>
</div>

<div>
    <div id="div2">我是div2</div>
    <span>我是span</span>
    <p>我跟div2是兄弟元素，但是我们之间隔着span</p>
</div>

<div class="div3">
    <div>div3下的子元素
        <div class="div4">
            <div class="div5">div3孙子元素</div>
        </div>
    </div>
    <div>div3下的子元素</div>
    <div>div3下的子元素</div>
    <div>div3下的子元素</div>
    <div>div3下的子元素</div>
</div>
</body>
</html>